<template>
  <div class="newsList">
    <globalhead :mes="mes"></globalhead>
    <div class="special">
      <div class="middle">
        <div
          class="news-item"
          :class="index % 2 == 1 ? 'rig' : 'lef'"
          v-for="(item, index) in newsData"
          :key="item.key"
        >
          <div class="n-left">
            <h1>面对老俄罗斯对手</h1>
            <p>
              地战胜俄。面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权地战胜俄。面排一直牢牢掌握着主动权地战胜俄。面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权地战胜俄。面排一直牢牢面排一直牢牢面排一直牢牢
            </p>
            <div class="morebtn btnShadow">
              <a href="">查看全文</a>
              <img src="../../assets/global-img/rightico.svg" alt="" />
            </div>
            <div class="bottom flclear">
              <div class="user">
                <img src="../../assets/global-img/samll-logo.png" alt="" />
                <span>admin</span>
              </div>
              <div class="share">
                <a href="">
                  <img src="../../assets/global-img/weixin-colour.svg" alt="" />
                </a>
                <a href="">
                  <img
                    src="../../assets/global-img/WechatMoments-colour.svg"
                    alt=""
                  />
                </a>
                <a href="">
                  <img src="../../assets/global-img/weibo-colour.svg" alt="" />
                </a>
                <a href="">
                  <img src="../../assets/global-img/QQ-colour.svg" alt="" />
                </a>
              </div>
            </div>
          </div>
          <div class="n-right">
            <img src="../../assets/global-img/pexels-fauxels.png" alt="" />
            <div class="timer">
              <img src="../../assets/timer.svg" alt="" />
              <span>2019.08.03</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pager">
        <pages :page="1" :pageSize="10" :total="100" @pageChange="changePage" />
      </div>
    </div>
  </div>
</template>

<script>
import globalhead from "../../components/global.vue"
import pages from "../../components/Pager.vue"
export default {
  props: ['newsData'],
  data() {
    return {
      mes: "新闻中心"
    }
  },
  components: {
    pages,
    globalhead
  },
  methods: {
    changePage() {

    }
  }
}
</script>

<style scoped lang="scss">
.newsList {
  width: 100%;
  margin: 0;
  .special {
    .middle {
      width: 1530px;
      margin: 0 auto;
      margin-top: 40px;
      .news-item {
        width: 100%;
        height: auto;
        height: 400px;
        background: #ffffff;
        box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.05);
        border-radius: 15px;
        margin-bottom: 37px;
        .n-left {
          float: left;
          text-align: right;
          padding: 43px 51px 0 55px;
          width: 640px;
          transition: all 0.5s;
          h1 {
            height: 35px;
            font-size: 22px;
            font-weight: 600;
            color: #000000;
            line-height: 35px;
          }
          p {
            width: 100%;
            height: 120px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.75);
            line-height: 40px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin: 22px 0 15px;
          }
          .morebtn {
            width: 140px;
            height: 55px;
            background: #0054f7;
            border-radius: 8px;
            line-height: 55px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
            a {
              font-size: 16px;
              font-weight: 500;
              color: #ffffff;
              margin-right: 23px;
            }
            img {
              width: 7px;
              height: 10px;
              vertical-align: middle;
            }
          }
          .bottom {
            width: 640px;
            margin: 0 auto;
            border-top: 1px solid #dadada;
            padding-top: 30px;
            box-sizing: border-box;
            margin-top: 20px;

            .user {
              vertical-align: middle;
              float: left;
              img {
                width: 35px;
                height: 35px;
                vertical-align: middle;
              }
              span {
                font-size: 16px;
                color: #010101;
                margin-left: 10px;
              }
            }
            .share {
              float: right;
              a {
                display: inline-block;
                width: 25px;
                height: 20px;
                margin: 0 12px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
        .n-right {
          overflow: hidden;
          height: 100%;
          position: relative;
          .timer {
            position: absolute;
            top: 0;
            right: 0;
            width: 170px;
            height: 55px;
            background: #ffffff;
            border-radius: 0px 0 0px 15px;
            line-height: 55px;
            text-align: center;
            img {
              width: 22px;
              height: 21px;
              vertical-align: middle;
              margin-top: -5px;
              margin-right: 15px;
            }
            span {
              font-size: 16px;
              color: rgba(0, 0, 0, 0.85);
            }
          }
        }
      }
      .news-item.rig {
        .n-left {
          float: right;
        }
        .n-right {
          overflow: hidden;
          .timer {
            top: 0;
            right: auto;
            left: 0;
            border-radius: 0 0 15px 0;
          }
        }
      }
      .news-item:hover {
        .n-left {
          padding: 43px 48px 0 48px !important;
        }
      }
    }
    .pager {
      text-align: center;
      margin: 43px 0 30px;
    }
  }
}
</style>